<template>
  <div class='container'>
    <el-card class="box-card">
      <questions-form v-model="conditions" @myEvent="doSomething"/>
      <el-alert
        :title='counts'
        type="info"
        :closable="false"
        style="margin-bottom : 20px"
        show-icon>
      </el-alert>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型">
          <template scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干">
          <template scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatTime"
          prop="addDate"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度">
          <template scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="id"
          label="操作"
          width="190px">
          <template scope="scope">
            <el-button size="small" type="primary" icon="el-icon-view" circle plain @click="getDetail(scope.row.id)"></el-button>
            <el-button size="small" type="success" icon="el-icon-edit" circle plain @click="hJumpToEdit(scope.row.id)"></el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" circle plain @click="delClick(scope.row.id)"></el-button>
            <el-button size="small" type="warning" icon="el-icon-check" circle plain @click="collectionClick(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
       <div class="block">
          <el-pagination
            background
            :current-page ='page'
            :page-sizes="[1,5, 10, 20, 50]"
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total">
          </el-pagination>
        </div>
        <questions-preview :questionID="previewData.id" :show="previewData.it"/>
    </el-card>
  </div>
</template>

<script>
import QuestionsForm from '../components/questions-form.vue'
import QuestionsPreview from '../components/questions-preview'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
export default {
  name: 'questions',
  components: {
    QuestionsForm,
    QuestionsPreview
  },
  data () {
    return {
      conditions: {},
      tableData: [],
      counts: '',
      page: 1,
      pagesize: 5,
      total: 0,
      previewData: {
        id: '',
        it: false
      },
      loading: false
    }
  },
  created () {
    this.getParameter()
  },
  methods: {
    // 获取table表格数据
    getParameter () {
      const data = { ...this.conditions }
      // const data = {
      //   page: this.page,
      //   pagesize: this.pagesize
      // }
      data.page = this.page
      data.pagesize = this.pagesize
      this.getList(data)
    },
    // 发送ajax请求table数据
    async getList (data) {
      this.loading = true
      try {
        const { data: res } = await list(data)
        this.tableData = res.items
        this.counts = '数据一共' + res.counts + '条'
        this.total = res.counts
        this.loading = false
      } catch (err) {
        console.log(err)
      }
    },
    // 事件处理
    formatTime (row) {
      const date = new Date(row.addDate)
      var month = date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      month = month < 10 ? '0' + month : month
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return date.getFullYear() + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    // 查看详情
    getDetail (id) {
      this.previewData.id = id // 传数据
      this.previewData.it = !this.previewData.it // 取反,为了让组件监听到变化
    },
    // 分页改变每页条数事件
    handleSizeChange (hpagesize) {
      this.pagesize = hpagesize
      this.page = 1
      this.getParameter()
    },
    // 分页改变当前页事件
    handleCurrentChange (currentpage) {
      this.page = currentpage
      this.getParameter()
    },
    // 修改文章按钮跳转页面
    hJumpToEdit (id) {
      this.$router.push('/questions/new?id=' + id)
    },
    // 删除按钮
    delClick (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delQuestions(id)
      }).catch(() => {
      })
    },
    // 删除请求
    async delQuestions (id) {
      try {
        await remove({ id: id })
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getParameter()
      } catch {
        this.$message({
          message: '删除失败',
          type: 'warning'
        })
      }
    },
    // 收藏进精选列表按钮
    collectionClick (id) {
      this.$confirm('确定要加入精选题库嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.addSelect(id)
      }).catch(() => {
      })
    },
    // 加入精选题库方法
    async addSelect (id) {
      try {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message({
          message: '加入精选题库成功',
          type: 'success'
        })
        this.getParameter()
      } catch {
        this.$message({
          message: '加入精选题库失败',
          type: 'warning'
        })
      }
    },
    // 按条件搜索试题
    doSomething () {
      this.conditions.pagesize = this.pagesize
      this.page = 1
      this.getList(this.conditions)
      console.log(this.conditions)
    }
  }
}

</script>

<style scoped lang='scss'>
  .container {
    padding:  10px;
  }
  .block {
    float: right;
    margin: 20px 0;
  }
</style>
